<template>
	<view class="content">
		<view class="header">
			<view class="header_bg">
				<view class="ipt">
					<view class="ipt1">
						<view class="ipt1_l">
							<text>特色课标题</text>
						</view>
						<view class="ipt1_r">
							<input type="text" value="" placeholder="请输入" />
						</view>
					</view>
					<view class="ipt1">
						<view class="ipt1_l">
							<text>特色课标题</text>
						</view>
						<view class="ipt1_r">
							<input type="text" value="" placeholder="请输入" />
						</view>
					</view>
					<view class="ipt1">
						<view class="ipt1_l">
							<text>特色课标题</text>
						</view>
						<view class="ipt1_r">
							<input type="text" value="" placeholder="请输入" />
						</view>
					</view>
				</view>

				<view class="image">
					<view class="image1">
						<text>图片上传</text>
					</view>
					<view class="image2">
						<view class="image2_l" v-for="(item,index) in imglist">
							<image :src="item" mode=""></image>
						</view>
						<view class="image2_l" @click="updateimg()">
							<image src="../../../static/sc.png" mode=""></image>
						</view>
					</view>
				</view>

				<view class="video">
					<view class="video1">
						<text>视频上传</text>
					</view>
					<view class="video2">
						<view class="video2_l" v-for="(item,index) in videolist">
							<image :src="item" mode=""></image>
						</view>
						<view class="video2_l" @click="updatevido()">
							<image src="../../../static/sc.png" mode=""></image>
						</view>
					</view>
				</view>
				
				<view class="bt">
					<button type="default">上传特色课</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imglist: [],
				videolist: []
			}
		},
		methods: {
			updateimg() {
				var that = this
				uni.chooseImage({
					count: 6, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						// console.log(JSON.stringify(res.tempFilePaths));
						console.log(res.tempFilePaths)
						that.imglist = that.imglist.concat(res.tempFilePaths)
						console.log(that.imglist)
					}
				});
			},
			updatevido() {
				var that = this
				uni.chooseImage({
					count: 6, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						// console.log(JSON.stringify(res.tempFilePaths));
						console.log(res.tempFilePaths)
						that.videolist = that.videolist.concat(res.tempFilePaths)
						console.log(that.videolist)
					}
				});

			}

		}
	}
</script>

<style>
	.content {
		width: 750rpx;
		height: 1840rpx;
		background: #FAFAFA;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.header {
		width: 750rpx;
		height: 240rpx;
		background: linear-gradient(180deg, #1789FF 0%, #93C3F9 100%);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.header_bg {
		padding-top: 32rpx;
	}

	.ipt {
		width: 690rpx;
		height: 324rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		margin: auto;
	}

	.ipt1 {
		display: flex;
		align-items: center;
		height: 33%;
	}

	.ipt1_l {
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 32rpx;
		color: #333333;
		margin-left: 40rpx;
	}

	.ipt1_r {
		width: 426rpx;
		height: 72rpx;
		background: #FFFFFF;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		border: 2rpx solid #1B8BFF;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 32rpx;
	}

	.image {
		margin-top: 40rpx;
	}

	.image1 {
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 32rpx;
		color: #333333;
		margin-left: 30rpx;


	}

	.image2 {
		display: flex;
		flex-wrap: wrap;

	}

	.image2_l {
		margin-top: 32rpx;
	}

	.image2 image {
		width: 320rpx;
		height: 240rpx;
		margin-left: 30rpx;
	}

	.video {
		margin-top: 40rpx;
	}

	.video1 {
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 32rpx;
		color: #333333;
		margin-left: 30rpx;
	}

	.video2 {
		display: flex;
		flex-wrap: wrap;
	}

	.video2_l {
		margin-top: 32rpx;

	}

	.video2_l image {

		width: 320rpx;
		height: 240rpx;
		margin-left: 30rpx;
	}
	.bt{
		margin-top: 148rpx;
	}
	.bt button{
		width: 690rpx;
		height: 96rpx;
		background: #409CFD;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 800;
		font-size: 32rpx;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>